<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>友情链接</title>
    <link rel="stylesheet" href="../../../static/libs/layui/css/layui.css">
    <link rel="stylesheet" href="../../../static/css/commom.css">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <input id="edtSearch" class="layui-input" type="text" placeholder="输入网站名称">
                        </div>
                        <div class="layui-inline">
                            <button id="btnSearch" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                        </div>
                        <div class="layui-inline">
                            <button id="addLink_btn" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-add-1"></i>添加
                            </button>
                        </div>
                      <!--  <button id="delAll_btn" class="layui-btn layui-btn-danger icon-btn">
                            <i class="layui-icon layui-icon-delete"></i>批量删除
                        </button>-->
                    </div>
                </div>
                <table class="layui-table" id="linkList" lay-filter="linkList"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="linksAdd">
        <form class="layui-form linksAdd model-form" lay-filter="linksAddForm">
            <input name="id" type="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label">LOGO</label>
                <div class="layui-upload-list linkLogo">
                    <img class="layui-upload-img linkLogoImg" src="">
                    <input name="logo" id="logo" hidden>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">网站名称</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input linkName" name="webName" lay-verify="required" placeholder="请输入网站名称" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">网站地址</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input linkUrl" name="webUrl" lay-verify="required|url" placeholder="请输入网站地址" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">站长邮箱</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input masterEmail" name="webmasterEmail" lay-verify="required|email" placeholder="请输入站长邮箱" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">展示位置</label>
                <div class="layui-input-block">
                    <input type="checkbox" class="layui-input showAddress" name="showLocation" lay-text="首页|子页" lay-skin="switch" {{d.checked==checked?'checked':''}}/>
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
                <button class="layui-btn" lay-filter="addLink" lay-submit>保存</button>
            </div>
        </form>
    </script>
    <script src="../../../static/libs/layui/layui.js"></script>
    <script src="../../../static/js/common.js"></script>
    <script>
        layui.use(["form","layer","table","upload","admin"],function () {  
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var upload = layui.upload;
            var admin = layui.admin;
            var $ = layui.jquery;
            //友链列表
            var tableIns = table.render({
                elem: '#linkList',
                // url : '../../static/json/linkList.json',
                url : '/blogLinkController/getBlogLink',
                page : true,
                cellMinWidth : 95,
                limit : 20,
                limits : [10,15,20,25],
                id : "linkListTab",
                cols : [
                    [
                    {type: "checkbox", fixed:"left", width:50},
                    {field: 'logo', title: 'LOGO', width:180, align:"center",templet:function(d){
                        return '<a href="'+d.webUrl+'" target="_blank"><img src="'+d.logo+'" height="26" /></a>';
                    }},
                    {field: 'webName', title: '网站名称', minWidth:240},
                    {field: 'webUrl', title: '网站地址',width:300,templet:function(d){
                        return '<a class="layui-blue" href="'+d.webUrl+'" target="_blank">'+d.webUrl+'</a>';
                    }},
                    {field: 'webmasterEmail', title: '站长邮箱',minWidth:200, align:'center'},
                    {field: 'showLocation', title: '展示位置', align:'center',templet:function(d){
                        return d.showLocation == "checked" ? "首页" : "子页";
                    }},
                    {field: 'createTime', title: '添加时间', align:'center',minWidth:110,templet : "<div>{{layui.util.toDateString(d.createTime, 'yyyy年MM月dd日,HH:mm:ss')}}</div>"},
                    {title: '操作', width:130,fixed:"right",align:"center", templet:function(){
                        return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>';
                    }}
                ]
                ]
            });
             //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
            $("#btnSearch").on("click",function(){
            /*    if($("#edtSearch").val() != ''){*/
                    table.reload("linkListTab",{
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            webName: $("#edtSearch").val().trim()  //搜索的关键字
                        }
                    })
               /* }else{
                    table.reload("linkListTab",{
                    })
                }*/
            });
            // 添加
            $('#addLink_btn').click(function () {
                showEditModel();
            });
            //批量删除
            $("#delAll_btn").click(function(){
                var checkStatus = table.checkStatus('linkListTab'),
                    data = checkStatus.data,
                    linkId = [];
                if(data.length > 0) {
                    for (var i in data) {
                        linkId.push(data[i].newsId);
                    }
                    layer.confirm('确定删除选中的友链？', {icon: 3,skin: 'layui-admin-skin',shade: .1}, function (index) {
                        // $.get("删除友链接口",{
                        //     linkId : linkId  //将需要删除的linkId作为参数传入
                        // },function(data){
                        tableIns.reload();
                        layer.close(index);
                        // })
                    })
                }else{
                    layer.msg("请选择需要删除的文章");
                }
            })
            // 工具条点击事件
            table.on('tool(linkList)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'edit') { // 修改
                    showEditModel(data);
                } else if (layEvent === 'del') { // 删除
                    doDel(data.id);
                }
            });
            // 删除
            function doDel(linkId) {
                layer.confirm('确定要删除友链吗？', {
                    skin: 'layui-admin-skin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    $.get('/blogLinkController/deleteBlogLinkById', {
                        id: linkId
                    }, function (res) {
                        layer.closeAll('loading');
                        if (res.success) {
                            layer.msg(res.msg, {icon: 1});
                            tableIns.reload({}, 'data');
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                });
            }
            // 显示表单弹窗
            function showEditModel(mUser) {
                admin.open({
                    type: 1,
                    skin: 'layui-admin-skin',
                    title: (mUser ? '修改' : '添加') + '用户',
                    content: $('#linksAdd').html(),
                    success: function (layero, dIndex) {
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        var url = mUser ? '/blogLinkController/updateBlogLink' : '/blogLinkController/insertBlogLink';
                        if(mUser){
                            // 回显数据
                            $(".linkLogoImg").attr("src",mUser.logo);
                        }
                        form.val('linksAddForm', mUser);
                        // 表单提交事件
                        form.on('submit(addLink)', function (data) {
                            layer.load(2);
                            $.get(url, data.field, function (res) {
                                layer.closeAll('loading');
                                if (res.success) {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    tableIns.reload({}, 'data');
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }, 'json');
                            return false;
                        });
                         //上传logo
                        upload.render({
                            elem: '.linkLogo',
                            url: '/imgUpload/imgload',
                            method : "post",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
                            done: function(res, index, upload){
                                var num = parseInt(4*Math.random());  //生成0-4的随机数，随机显示一个头像信息
                               /* $('#userFace').attr('src', res.data.urlLoad);
                                $('#headImg').val(res.data.urlLoad);*/
                                $('.linkLogoImg').attr('src',res.data.urlLoad);
                                $('#logo').val(res.data.urlLoad);
                                $('.linkLogo').css("background","#fff");
                            }
                        });
                    }
                });
            }
        })
    </script>
</body>
</html>